<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播定位示例</title>
    <!-- 
        让元素水平排列:
          1. display: inline-block; 行块元素
    -->
          <style>
            #box{
                width:500px;
                height:200px;
                position: relative;
            }
            img{
                width:500px;
                height:200px;
            }
            #body{
                width:100px;
                height:50px;
                position: absolute;
                bottom: 2px;
                right:2px;
            }
            #body div{
                display:inline-block;
            }
          </style>
</head>
  
<body>
    <div id="box">
        <img src="../img/11.jpg">
        <div id="body">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
    </div>
</body>
</html>